import React, { useState, useEffect } from 'react'
import { NavBar, Search, Overlay } from 'react-vant';
import { useNavigate } from "react-router-dom"
import { useDispatch } from "react-redux"
import "./myscss/Ceck3.scss"
import { changeTxt4 } from "../../store/modules/HcySlice1"
export default function Ceck3() {
    const dispatch = useDispatch()
    const navigate = useNavigate()
    let [sval, setSval] = useState("")
    let [data, setData] = useState(["心血管科室", "妇产科", "脑血管内科", "消化内科", "外科", "综合科", "皮肤科", "儿科", "糖尿病科", "肿瘤科", "骨科", "眼科", "耳鼻喉科", "麻醉科", "超声科", "烧伤科", "体检科"])

    let [addval, setAddval] = useState("")
    let [visible, setVisible] = useState(false)
    let addlist = () => {
        setVisible(true)
    }
    let yesadd=()=>{
        if(addval===""){
            alert("请输入科室名称")
            return
        }
        let copy=[...data]
        copy.push(addval)
        setData(copy)
        setAddval("")
        setVisible(false)
    }
    return (
        <div id='ceck3'>
            <div className='top1'>
                <NavBar
                    leftText="选择科室"
                    onClickLeft={() => navigate('/ysrz/page1')}
                />
            </div>
            <div className='top2'>
                <Search
                    shape="round"
                    value={sval}
                    onChange={setSval}
                    placeholder="请输入搜索关键词"
                />
            </div>
            <div className='main'>
                <div className='onebox'>全部科室</div>
                {(data.filter(item=>item.includes(sval))).map((item, index) => (
                    <div className='box' key={index} onClick={()=>{navigate("/ysrz/page1");dispatch(changeTxt4(item))}}>{item}</div>
                ))}
                <div className='btnbox' onClick={() => { addlist() }}>其他(没有我所在科室，点击添加)</div>
            </div>
            <Overlay visible={visible} onClick={() => setVisible(false)}
                style={{
                    height: '100%',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                }}>
                <div className='overlay' style={{ width: 360, height: 260, backgroundColor: '#fff', borderRadius: 4 }}>
                    <p>添加科室</p>
                    <div className='bigbox'>
                        <p>名称:</p>
                        <input type="text" value={addval} onChange={(e)=>{setAddval(e.target.value)}} placeholder='请输入科室名称' />
                    </div>
                    <div className='btn'>
                        <button onClick={() => { setVisible(false) }}>取消</button>
                        <button className='active' onClick={() => { yesadd() }}>确定</button>
                    </div>
                </div>
            </Overlay>
        </div>
    )
}
